<template>
    <div class="review-container">
        <div class="review-header">
            <h2>我的复习计划</h2>
            <div class="header-actions">
                <el-button type="primary" @click="generateNewPlan">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    生成新计划
                </el-button>
                <el-button @click="goToHome">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    返回首页
                </el-button>
            </div>
        </div>

        <div class="review-content">
            <!-- 复习进度概览 -->
            <el-card class="progress-overview">
                <template #header>
                    <div class="card-header">
                        <span>复习进度概览</span>
                        <el-tag type="success">本周完成度: {{ weeklyProgress }}%</el-tag>
                    </div>
                </template>
                <div class="progress-stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ totalReviewCount }}</div>
                        <div class="stat-label">总复习次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ continuousDays }}</div>
                        <div class="stat-label">连续复习天数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ masteryRate }}%</div>
                        <div class="stat-label">知识点掌握率</div>
                    </div>
                </div>
            </el-card>

            <!-- 今日复习任务 -->
            <el-card class="today-tasks">
                <template #header>
                    <div class="card-header">
                        <span>今日复习任务</span>
                        <el-tag type="warning">剩余 {{ remainingTasks }} 个任务</el-tag>
                    </div>
                </template>
                <div class="task-list">
                    <div v-for="task in todayTasks" :key="task.id" class="task-item">
                        <el-checkbox v-model="task.completed" @change="updateTaskStatus(task)">
                            <div class="task-content">
                                <div class="task-title">{{ task.title }}</div>
                                <div class="task-info">
                                    <el-tag size="small" :type="task.type === 'review' ? 'info' : 'success'">
                                        {{ task.type === 'review' ? '复习' : '新学' }}
                                    </el-tag>
                                    <span class="task-time">{{ task.estimatedTime }}分钟</span>
                                </div>
                            </div>
                        </el-checkbox>
                    </div>
                </div>
            </el-card>

            <!-- 复习计划时间表 -->
            <el-card class="review-schedule">
                <template #header>
                    <div class="card-header">
                        <span>复习计划时间表</span>
                        <el-radio-group v-model="scheduleView" size="small">
                            <el-radio-button label="week">周视图</el-radio-button>
                            <el-radio-button label="month">月视图</el-radio-button>
                        </el-radio-group>
                    </div>
                </template>
                <div class="schedule-content">
                    <el-calendar v-model="currentDate">
                        <template #dateCell="{ data }">
                            <div class="calendar-cell">
                                <p :class="data.isSelected ? 'is-selected' : ''">
                                    {{ data.day.split('-').slice(2).join('') }}
                                </p>
                                <div class="schedule-dots">
                                    <span v-for="(dot, index) in getScheduleDots(data.day)" :key="index" class="dot"
                                        :class="dot.type">
                                    </span>
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
            </el-card>

            <!-- 知识点掌握分析 -->
            <el-card class="knowledge-analysis">
                <template #header>
                    <div class="card-header">
                        <span>知识点掌握分析</span>
                        <el-select v-model="selectedCategory" placeholder="选择分类" size="small">
                            <el-option v-for="item in categories" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </template>
                <div class="analysis-content">
                    <div class="chart-container">
                        <div class="chart-item">
                            <h4>掌握程度分布</h4>
                            <div class="mastery-distribution">
                                <div class="mastery-item" v-for="(item, index) in masteryDistribution" :key="index">
                                    <div class="mastery-bar"
                                        :style="{ height: item.percentage + '%', backgroundColor: item.color }">
                                        <span class="mastery-value">{{ item.percentage }}%</span>
                                    </div>
                                    <span class="mastery-label">{{ item.label }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="chart-item">
                            <h4>复习效果趋势</h4>
                            <div class="trend-chart">
                                <!-- 这里可以集成echarts等图表库来展示趋势 -->
                                <div class="trend-placeholder">趋势图表区域</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh, HomeFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 复习进度数据
const weeklyProgress = ref(75)
const totalReviewCount = ref(128)
const continuousDays = ref(15)
const masteryRate = ref(82)

// 今日任务数据
const remainingTasks = ref(3)
const todayTasks = ref([
    {
        id: 1,
        title: '复习《黄帝内经》基础理论',
        type: 'review',
        estimatedTime: 30,
        completed: false
    },
    {
        id: 2,
        title: '学习中药配伍原则',
        type: 'new',
        estimatedTime: 45,
        completed: false
    },
    {
        id: 3,
        title: '针灸穴位复习',
        type: 'review',
        estimatedTime: 20,
        completed: false
    }
])

// 日历相关数据
const currentDate = ref(new Date())
const scheduleView = ref('week')

// 知识点分析数据
const selectedCategory = ref('all')
const categories = [
    { value: 'all', label: '全部' },
    { value: 'theory', label: '基础理论' },
    { value: 'herbs', label: '中药学' },
    { value: 'acupuncture', label: '针灸学' }
]

const masteryDistribution = [
    { label: '精通', percentage: 30, color: '#67C23A' },
    { label: '熟练', percentage: 45, color: '#409EFF' },
    { label: '了解', percentage: 20, color: '#E6A23C' },
    { label: '待加强', percentage: 5, color: '#F56C6C' }
]

// 方法
const generateNewPlan = () => {
    ElMessage.success('正在生成新的复习计划...')
    router.push('/review/study')
}

const goToHome = () => {
    router.push('/home')
}

const updateTaskStatus = (task) => {
    remainingTasks.value = todayTasks.value.filter(t => !t.completed).length
    // 这里添加更新任务状态的逻辑
}

const getScheduleDots = (day) => {
    // 模拟数据，实际应该根据后端数据返回
    return [
        { type: 'review' },
        { type: 'new' }
    ]
}
</script>

<style lang="scss" scoped>
.review-container {
    padding: 20px;

    .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
            margin: 0;
            color: #303133;
        }

        .header-actions {
            display: flex;
            gap: 10px;
        }
    }

    .review-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        .el-card {
            margin-bottom: 20px;
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .progress-overview {
        .progress-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;

            .stat-item {
                .stat-value {
                    font-size: 24px;
                    font-weight: bold;
                    color: #409EFF;
                }

                .stat-label {
                    color: #909399;
                    margin-top: 5px;
                }
            }
        }
    }

    .today-tasks {
        .task-list {
            .task-item {
                padding: 10px 0;
                border-bottom: 1px solid #EBEEF5;

                &:last-child {
                    border-bottom: none;
                }

                .task-content {
                    margin-left: 10px;

                    .task-title {
                        font-size: 14px;
                        color: #303133;
                    }

                    .task-info {
                        margin-top: 5px;
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        .task-time {
                            color: #909399;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .review-schedule {
        .calendar-cell {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .schedule-dots {
                display: flex;
                gap: 4px;
                justify-content: center;
                margin-top: 4px;

                .dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;

                    &.review {
                        background-color: #409EFF;
                    }

                    &.new {
                        background-color: #67C23A;
                    }
                }
            }
        }
    }

    .knowledge-analysis {
        .analysis-content {
            .chart-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;

                .chart-item {
                    h4 {
                        margin: 0 0 15px;
                        color: #303133;
                    }
                }

                .mastery-distribution {
                    display: flex;
                    align-items: flex-end;
                    height: 200px;
                    gap: 20px;

                    .mastery-item {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .mastery-bar {
                            width: 100%;
                            position: relative;
                            border-radius: 4px 4px 0 0;
                            transition: height 0.3s;

                            .mastery-value {
                                position: absolute;
                                top: -20px;
                                left: 50%;
                                transform: translateX(-50%);
                                color: #606266;
                                font-size: 12px;
                            }
                        }

                        .mastery-label {
                            margin-top: 8px;
                            color: #909399;
                            font-size: 12px;
                        }
                    }
                }

                .trend-chart {
                    height: 200px;
                    background: #f5f7fa;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #909399;
                }
            }
        }
    }
}

// 响应式设计
@media screen and (max-width: 1200px) {
    .review-content {
        grid-template-columns: 1fr !important;
    }
}
</style>